<template>
	<div class="app-container">
		<el-input
			v-model="filterText"
			placeholder="Filter keyword"
			style="margin-bottom:30px;"
		/>

		<el-table
			:data="menuList"
			style="width: 100%;margin-bottom: 20px;"
			row-key="id"
			border
			default-expand-all
			:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
		>
			<el-table-column prop="name" label="名称" sortable width="180">
			</el-table-column>
			<el-table-column prop="path" label="访问路径" sortable width="180">
			</el-table-column>
			<el-table-column prop="component" label="组件路径" sortable width="180">
			</el-table-column>
			<el-table-column prop="permissionValue" label="权限值"> </el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<!-- v-if="node.level == 1 || node.level == 2" v-if="node.level == 3" v-if="node.level == 4"-->
					<el-button
						v-if="
							(scope.row.level == 1 || scope.row.level == 2) &&
								hasPerm('permission.add')
						"
						type="text"
						size="mini"
						@click="
							() => {
								(dialogFormVisible = true), (menu.pid = scope.row.id);
							}
						"
						>添加菜单
					</el-button>
					<el-button
						v-if="scope.row.level == 3 && hasPerm('permission.add')"
						type="text"
						size="mini"
						@click="
							() => {
								(dialogPermissionVisible = true),
									(permission.pid = scope.row.id);
							}
						"
						>添加功能
					</el-button>
					<el-button
						v-if="scope.row.level == 4 && hasPerm('permission.update')"
						type="text"
						size="mini"
						@click="() => updateFunction(scope.row)"
						>修改功能
					</el-button>
					<el-button
						v-if="scope.row.level != 4 && hasPerm('permission.update')"
						type="text"
						size="mini"
						@click="() => getById(scope.row)"
						>修改
					</el-button>
					<el-button
						type="text"
						size="mini"
						@click="() => remove(scope.row)"
						v-if="hasPerm('permission.remove')"
						>删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog :visible.sync="dialogFormVisible" :title="dialogFormValue">
			<el-form
				ref="menu"
				:model="menu"
				:rules="menuValidateRules"
				label-width="120px"
			>
				<el-form-item label="菜单名称" prop="name">
					<el-input v-model="menu.name" />
				</el-form-item>
				<el-form-item label="访问路径" prop="path">
					<el-input v-model="menu.path" />
				</el-form-item>
				<el-form-item label="组件路径" prop="component">
					<el-input v-model="menu.component" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="restData()">取 消</el-button>
				<el-button type="primary" @click="append()">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 添加功能的窗口 -->
		<el-dialog :visible.sync="dialogPermissionVisible" title="添加功能">
			<el-form
				ref="permission"
				:model="permission"
				:rules="permissionValidateRules"
				label-width="120px"
			>
				<el-form-item label="功能名称" prop="name">
					<el-input v-model="permission.name" />
				</el-form-item>
				<el-form-item label="访问路径">
					<el-input v-model="permission.path" />
				</el-form-item>
				<el-form-item label="组件路径">
					<el-input v-model="permission.component" />
				</el-form-item>
				<el-form-item label="功能权限值" prop="permissionValue">
					<el-input v-model="permission.permissionValue" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="restData()">取 消</el-button>
				<el-button type="primary" @click="appendPermission()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import menu from "@/api/acl/menu";

const menuForm = {
	name: "",
	pid: 0,
	path: "",
	component: "",
	type: "1"
};
const perForm = {
	permissionValue: "",
	type: "2",
	name: "",
	path: "",
	component: "",
	pid: 0
};

export default {
	data() {
		return {
			filterText: "",
			menuList: [],
			defaultProps: {
				children: "children",
				label: "name"
			},
			dialogFormValue: "添加菜单",
			dialogFormVisible: false,
			dialogPermissionVisible: false,
			menu: menuForm,
			permission: perForm,
			menuValidateRules: {
				name: [{ required: true, trigger: "blur", message: "菜单名必须输入" }],
				path: [
					{ required: true, trigger: "blur", message: "菜单路径必须输入" }
				],
				component: [
					{ required: true, trigger: "blur", message: "组件名称必须输入" }
				]
			},
			permissionValidateRules: {
				name: [
					{ required: true, trigger: "blur", message: "功能名称必须输入" }
				],
				permissionValue: [
					{ required: true, trigger: "blur", message: "功能权限值必须输入" }
				]
			}
		};
	},
	// 监听上面文本框搜索
	watch: {
		filterText(val) {
			this.$refs.menuTree.filter(val);
		}
	},

	created() {
		this.fetchNodeList();
	},

	methods: {
		fetchNodeList() {
			menu.getNestedTreeList().then(response => {
				if (response.success === true) {
					this.menuList = response.data;
					console.log(this.menuList);
				}
			});
		},
		filterNode(value, data) {
			if (!value) return true;
			return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1;
		},
		remove(data) {
			console.log(data);

			this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			})
				.then(() => {
					return menu.removeById(data.id);
				})
				.then(() => {
					this.fetchNodeList(); // 刷新列表
					this.$message({
						type: "success",
						message: "删除成功!"
					});
				})
				.catch(response => {
					// 失败
					if (response === "cancel") {
						this.$message({
							type: "info",
							message: "已取消删除"
						});
					} else {
						this.$message({
							type: "error",
							message: "删除失败"
						});
					}
				});
		},
		appendPermission() {
			this.$refs.permission.validate(valid => {
				if (valid) {
					if (this.permission.id) {
						this.update(this.permission);
					} else {
						menu.saveLevelOne(this.permission).then(response => {
							this.dialogPermissionVisible = false;
							this.$message({
								type: "success",
								message: "添加功能成功"
							});
							// 刷新页面
							this.fetchNodeList();
							this.menu = { ...menuForm };
							this.permission = { ...perForm };
						});
					}
				}
			});
		},
		appendLevelOne() {
			menu
				.saveLevelOne(this.menu)
				.then(response => {
					this.dialogFormVisible = false;
					this.$message({
						type: "success",
						message: "添加一级菜单成功"
					});
					// 刷新页面
					this.fetchNodeList();
					this.menu = { ...menuForm };
					this.permission = { ...perForm };
				})
				.catch(response => {
					// 你们写：判断点击取消清空一下
					this.dialogFormVisible = false;
					this.$message({
						type: "error",
						message: "添加一级菜单失败"
					});
					this.menu = { ...menuForm };
					this.permission = { ...perForm };
				});
		},

		append() {
			this.$refs.menu.validate(valid => {
				if (valid) {
					if (!this.menu.id) {
						// 添加
						if (this.menu.pid == 0) {
							this.appendLevelOne(); // 一级分类的添加
						} else {
							this.appendLevelTwo(); // 二级分类的添加
						}
					} else {
						// 修改
						this.update(this.menu);
					}
				}
			});
		},

		update(obj) {
			// debugger
			menu.update(obj).then(response => {
				this.dialogFormVisible = false;
				this.$message({
					type: "success",
					message: "修改成功"
				});
				// 刷新页面
				this.fetchNodeList();
				this.restData();
			});
		},
		appendLevelTwo() {
			menu
				.saveLevelOne(this.menu)
				.then(response => {
					// 1、把文本框关
					this.dialogFormVisible = false;
					// 2、提示成功
					this.$message({
						type: "success",
						message: "添加二级分类成功"
					});
					// 3、刷新页面
					this.fetchNodeList();
					// 4、把menu清空
					this.menu = { ...menuForm };
					this.permission = { ...perForm };
				})
				.catch(response => {
					// 1、把文本框关
					this.dialogFormVisible = false;
					// 2、提示成功
					this.$message({
						type: "error",
						message: "添加二级分类失败"
					});
					// 3、把menu清空
					this.menu = { ...menuForm };
					this.permission = { ...perForm };
				});
		},
		getById(data) {
			this.dialogFormVisible = true;
			this.menu = data;
		},
		updateFunction(data) {
			this.dialogPermissionVisible = true;
			this.permission = data;
		},
		restData() {
			this.dialogPermissionVisible = false;
			this.dialogFormVisible = false;
			this.menu = { ...menuForm };
			this.permission = { ...perForm };
		}
	}
};
</script>
